<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>悠U - 修改之后的 </title>
    <!-- 引入bootstrap框架的样式文件 -->
    <link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.css" type="text/css">
    <!-- 引入外部的css样式 -->
    <!-- 删除替换的 -->
    <!-- <link rel="stylesheet" href="../../plugins/bootstrap/css/animate.css" type="text/css"> -->
    <!-- <link rel="stylesheet" href="../../plugins/bootstrap/css/font-awesome.css?v=4.4.0" type="text/css"> -->
    <link href="H+/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="H+/css/animate.css" rel="stylesheet">
    <!-- 引用自己写的css样式 -->
    <link href="css/index/index.css" rel="stylesheet" type="text/css">
    <style>

    </style>
</head>

<body>
    <!-- 导航 begin -->
    <div class="container-fluid" id="head" style="margin-bottom: 0px;">
        <div class="row">

            <nav class="navbar" role="navigation"
                style="background-color: rgb(206, 228, 247);padding-left: 100px;margin-bottom: 0px">
                <div class="container-fluid">
                    <div>
                        <button type="button" class="navbar-toggle" data-toggle="collapse"
                            data-target="#example-navbar-collapse" style="background-color: royalblue">
                            <span class="sr-only">切换导航</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a href="index.html"> <img src="imgs/index/logo.jpg" alt="失败" id="logo"
                                class="img-circle navbar-brand"></a>
                        <a class="navbar-brand" href="index.html" style="padding-left: 0px;font-family:楷体">
                            <span data-toggle="tooltip" title="悠 U 新方式">
                                悠&nbsp;U</span></a>
                    </div>

                    <div class="collapse navbar-collapse" id="example-navbar-collapse ">
                        <ul class="nav navbar-nav ">
                            <li><a href="index.html">
                                    <span style="padding:0px 20px" data-toggle="tooltip" title="首页"> 首页</span></a></li>

                            <li class="dropdown">
                                <a href="views/traveler/travelnotes_index.html" class="dropdown-toggle" data-toggle="dropdown">
                                    游记<b class="caret"></b>
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a href="views/traveler/traveler_list.html">
                                            <span class="glyphicon glyphicon-user"
                                                style="text-shadow: rgb(216, 206, 206) 3px -1px;"></span>
                                            &nbsp;达人
                                            <span class="badge pull-center" style="background-color: red">hot</span>
                                        </a></li><br>
                                    <li><a href="views/traveler/editnotes.html">
                                            <span class="glyphicon glyphicon-edit"></span>
                                            写游记
                                            <span class="badge pull-center"
                                                style="background-color: red;font-size:3px">赚钻石</span>
                                        </a></li><br>
                                    <li><a href="views/traveler/travelnotes_index.html">
                                            <span class="glyphicon glyphicon-flag"></span>
                                            游记主页</a></li><br>
                                </ul>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    景点<b class="caret"></b>
                                    <!-- <span class="label label-danger" style="font-size: 1px;">NEW</span>-->
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a href="views/Attractions/Attractions.html"><span class="glyphicon glyphicon-fire">&nbsp;主题景点</span>
                                            <span class="badge pull-center"
                                                style="background-color: red;font-size:3px">NEW</span>
                                        </a></li><br>
                                
                                    <li><a href="views/Attractions/details.html"><span class="glyphicon glyphicon-bell">&nbsp;当地玩乐</span></a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="views/Tourist/travels_index.html">
                                    <span data-toggle="tooltip" title="导&nbsp;游">导游</span>
                                    <!-- <span class="badge pull-center"
                                        style="color: red;font-size:1px">hot</span> -->
                                </a>
                            </li>

                        </ul>

                        <!-- <div style="padding-top:15px" class="">
                                <input type="text" placeholder="用户/游戏/动态" style=" height:20px">
                                
                            </div> -->


                        <ul class="nav navbar-nav navbar-right" style="padding-right: 100px">

                            <li class="dropdown">
                            <li><a href="views/person_center/person_center.html" class="dropdown-toggle" data-toggle="dropdown"
                                    style="font-family: 楷体;padding-left: 0px">
                                   我的悠 U &nbsp;<img id="headerImg" src="imgs/index/head.jpg" class="img-circle"><b
                                        class="caret"></b>
                                </a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a href="views/person_center/order.html">我的订单</a>
                                    </li>
                                    <li>
                                        <a href="views/Tourist/myTraveler.html">我的导游</a>
                                    </li>
                                    <li>
                                        <a href="views/person_center/pay_diamond.html">我的钱包</a>
                                    </li>

                                    <li>
                                        <a href="views/traveler/myTraveler2.html">我的游记</a>
                                    </li>
                                    <li class="divider"></li>
                                    <li> <a href="views/person_center/messages.html">系统通知</a> </li>
                                    <li> <a href="views/person_center/personal_information.html">我的账号</a> </li>
                                    <li> <a href="views/user/account_login.html">退出</a> </li>

                                </ul>
                            </li>
                            <li><a href="#weibo" style="padding-left:8px;padding-right: 8px"><i
                                        class="fa fa-weibo"></i></a></li>
                            <li><a href="#weixin" style="padding-left:8px;padding-right: 8px"><i
                                        class="fa fa-weixin"></i> </a></li>
                            <li><a href="#weixin" style="padding-left:8px;padding-right: 8px"> <i
                                        class="fa fa-qq"></i></a></li>
                            <li><a href="views/user/account_login.html" style="padding-left:10px;padding-right: 10px">登录</li> </a>
                            <li><a href="views/register/register.html" style="padding-left:10px;padding-right: 10px">注册</li> </a>



                        </ul>
                    </div>
                </div>
            </nav>
        </div>
    </div>
    <!-- 导航 end -->


    <!--轮播 - banner - begin-->
    <div class="banner_container">
        <div class="container">
            <ul id="banner-box">
                <li style="z-index: 3;opacity: 1;">
                    <a href="">
                        <img src="imgs/index/pic_001.jpg" alt="">
                        <div class="text-box">
                            <p><span>11</span>/Dec.2017</p>
                            <h2>唯有旅行与美食，不负时光</h2>
                        </div>
                    </a>
                </li>
                <li style="z-index: 1;opacity: 1;">
                    <a href="">
                        <img src="https://n4-q.mafengwo.net/s14/M00/78/71/wKgE2l15xeyAGP_NAAbXnvbYGdA308.jpg?imageMogr2%2Finterlace%2F1"
                            alt="">
                        <div class="text-box">
                            <p><span>11</span>/Dec.2017</p>
                            <h2>印度尼西亚︱我的人生伏笔，从东爪哇到巴厘岛</h2>
                        </div>
                    </a>
                </li>
                <li style="z-index: 1;opacity: 1;">
                    <a href="">
                        <img src="imgs/index/pic_003.jpg" alt="">
                        <div class="text-box">
                            <p><span>11</span>/Dec.2017</p>
                            <h2>天地山水，超你所愿（附12天加拿大自驾指南）</h2>
                        </div>
                    </a>
                </li>
                <li style="z-index: 1;opacity: 1;">
                    <a href="">
                        <img src="imgs/index/pic_004.jpg" alt="">
                        <div class="text-box">
                            <p><span>11</span>/Dec.2017</p>
                            <h2>锦州 | 2天暴食13顿，这是一座来了没时间观光的城市！</h2>
                        </div>
                    </a>
                </li>
                <li style="z-index: 1;opacity: 1;">
                    <a href="">
                        <img src="https://b3-q.mafengwo.net/s14/M00/43/49/wKgE2l12JriAGm53AAduwcseKIs827.jpg?imageMogr2%2Finterlace%2F1"
                            alt="">
                        <div class="text-box">
                            <p><span>11</span>/Dec.2017</p>
                            <h2>澳之秘境，倾翻的浪漫盐池——西澳南澳自驾笔记</h2>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
        <ul id="banner-index-box" class="banner-index-box">
            <li class="banner-index-active">
                <img src="imgs/index/pic_001.jpg" alt="">
                <span></span>
            </li>
            <li>
                <img src="https://n4-q.mafengwo.net/s14/M00/78/71/wKgE2l15xeyAGP_NAAbXnvbYGdA308.jpg?imageMogr2%2Finterlace%2F1"
                    alt="">
                <span></span>
            </li>
            <li>
                <img src="imgs/index/pic_003.jpg" alt="">
                <span></span>
            </li>
            <li>
                <img src="imgs/index/pic_004.jpg" alt="">
                <span></span>
            </li>
            <li>
                <img src="https://b3-q.mafengwo.net/s14/M00/43/49/wKgE2l12JriAGm53AAduwcseKIs827.jpg?imageMogr2%2Finterlace%2F1"
                    alt="">

                <span></span>
            </li>
        </ul>
    </div>

    <!-- 轮播 end -->
    <!-- body 导航 -->
    <div class="container" style="margin-top: 20px;">
        <div class="row">
            <h3>精彩推荐</h3>
        </div>
    </div>

    <!-- 热门推荐  begin -->
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-1">
            </div>
            <div class="col-md-9">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="thumbnail">
                                <img src="imgs/index/jd01.jpg" alt="通用的占位符缩略图">
                                <div class="caption" style="overflow:hidden">
                                    <p>乌镇东山+西塘一日游+夜宿西西巴士2日游</p>
                                    <span style="float: right;">&nbsp;起</span>
                                    <span style="float: right;color: red"><i>¥</i><em>347</em></span>
                                </div>
                                <div style="overflow:hidden">
                                    <span
                                        style="font-size:10px ;color: rgb(107, 102, 102);float: left;overflow:hidden">悠U网提供</span>
                                    <span
                                        style="font-size:10px ;color: rgb(107, 102, 102);float: right;overflow:hidden">苏州出发</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="thumbnail">
                                <img src="imgs/index/rm_018.jpg" alt="通用的占位符缩略图">
                                <div class="caption" style="overflow:hidden">
                                    <p>无锡灵山大佛汽车1日跟团游<br>祈福之旅</p>
                                    <span style="float: right;">&nbsp;起</span>
                                    <span style="float: right;color: red"><i>¥</i><em>167</em></span>

                                </div>
                                <div style="overflow:hidden">
                                    <span
                                        style="font-size:10px ;color: rgb(107, 102, 102);float: left;overflow:hidden">悠U网提供</span>
                                    <span
                                        style="font-size:10px ;color: rgb(107, 102, 102);float: right;overflow:hidden">苏州出发</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="thumbnail">
                                <img src="imgs/index/jd03.jpg" alt="通用的占位符缩略图">
                                <div class="caption" style="overflow:hidden">
                                    <p>【赠免费巴士】长江三峡——总统系列游轮 宜昌-重庆 4晚5日</p>
                                    <span style="float: right;">&nbsp;起</span>
                                    <span style="float: right;color: red"><i>¥</i><em>1507</em></span>
                                </div>
                                <div style="overflow:hidden">
                                    <span
                                        style="font-size:10px ;color: rgb(107, 102, 102);float: left;overflow:hidden">悠U网提供</span>
                                    <span
                                        style="font-size:10px ;color: rgb(107, 102, 102);float: right;overflow:hidden">宜昌出发</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="thumbnail">
                                <img src="imgs/index/jd05.jpg" alt="通用的占位符缩略图">
                                <div class="caption" style="overflow:hidden">
                                    <p>住琅琊山荣毅山水酒店,畅玩林鹤优美的滁州琅琊山美景合适亲子游</p>
                                    <span style="float: right;">&nbsp;起</span>
                                    <span style="float: right;color: red"><i>¥</i><em>542</em></span>
                                </div>
                                <div style="overflow:hidden">
                                    <span
                                        style="font-size:10px ;color: rgb(107, 102, 102);float: left;overflow:hidden">悠U网提供</span>
                                    <span
                                        style="font-size:10px ;color: rgb(107, 102, 102);float: right;overflow:hidden">苏州出发</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="thumbnail">
                                <img src="imgs/index/jd04.jpg" alt="通用的占位符缩略图">
                                <div class="caption" style="overflow:hidden">
                                    <p>杭州+上海高铁往返2日跟团游，常州出发 乘船游西湖 </p>
                                    <span style="float: right;">&nbsp;起</span>
                                    <span style="float: right;color: red"><i>¥</i><em>721</em></span>
                                </div>
                                <div style="overflow:hidden">
                                    <span
                                        style="font-size:10px ;color: rgb(107, 102, 102);float: left;overflow:hidden">悠U网提供</span>
                                    <span
                                        style="font-size:10px ;color: rgb(107, 102, 102);float: right;overflow:hidden">苏州出发</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="thumbnail">
                                <img src="imgs/index/rm_009.jpg" alt="通用的占位符缩略图">
                                <div class="caption" style="overflow:hidden">
                                    <p>杭州+上海高铁往返2日跟团游，常州出发 乘船游西湖 </p>
                                    <span style="float: right;">&nbsp;起</span>
                                    <span style="float: right;color: red"><i>¥</i><em>721</em></span>
                                </div>
                                <div style="overflow:hidden">
                                    <span
                                        style="font-size:10px ;color: rgb(107, 102, 102);float: left;overflow:hidden">悠U网提供</span>
                                    <span
                                        style="font-size:10px ;color: rgb(107, 102, 102);float: right;overflow:hidden">苏州出发</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="thumbnail">
                                <img src="imgs/index/rm_014.jpg" alt="通用的占位符缩略图">
                                <div class="caption" style="overflow:hidden">
                                    <p>杭州+上海高铁往返2日跟团游，常州出发 乘船游西湖 </p>
                                    <span style="float: right;">&nbsp;起</span>
                                    <span style="float: right;color: red"><i>¥</i><em>721</em></span>
                                </div>
                                <div style="overflow:hidden">
                                    <span
                                        style="font-size:10px ;color: rgb(107, 102, 102);float: left;overflow:hidden">悠U网提供</span>
                                    <span
                                        style="font-size:10px ;color: rgb(107, 102, 102);float: right;overflow:hidden">苏州出发</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="thumbnail">
                                <img src="imgs/index/rm_020.jpg" alt="通用的占位符缩略图" class="box">
                                <div class="caption" style="overflow:hidden">
                                    <p>杭州+上海高铁往返2日跟团游，常州出发 乘船游西湖 </p>
                                    <span style="float: right;">&nbsp;起</span>
                                    <span style="float: right;color: red"><i>¥</i><em>721</em></span>
                                </div>
                                <div style="overflow:hidden">
                                    <span
                                        style="font-size:10px ;color: rgb(107, 102, 102);float: left;overflow:hidden">悠U网提供</span>
                                    <span
                                        style="font-size:10px ;color: rgb(107, 102, 102);float: right;overflow:hidden">苏州出发</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-2">
                <div class="container-fluid">
                    <div class="row" style="background-color: rgb(215, 238, 247)">
                        <div>
                            <br>
                            热门城市
                            <br><br>
                            <ul style="list-style: none;font-size: 13px;color: royalblue">
                                <li>苏州&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;滁州&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;合肥&nbsp;&nbsp;&nbsp;&nbsp;成都
                                </li>
                                <li>南京&nbsp;&nbsp;&nbsp;&nbsp;马鞍山&nbsp;&nbsp;&nbsp;&nbsp;宣城&nbsp;&nbsp;&nbsp;&nbsp;无锡
                                </li>
                                <li>西安&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;镇江&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;上海&nbsp;&nbsp;&nbsp;&nbsp;云南
                                </li>
                                <li>上海&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;北京&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;常州&nbsp;&nbsp;&nbsp;&nbsp;扬州
                                </li>
                            </ul>
                            <br>
                            <br>
                            主题活动
                            <br><br>
                            <ul style="list-style: none;font-size: 13px;color: royalblue">
                                <li>名胜古迹&nbsp;&nbsp;&nbsp;&nbsp;博物馆&nbsp;&nbsp;&nbsp;&nbsp;城市风光
                                </li>
                                <li>历史遗迹&nbsp;&nbsp;&nbsp;&nbsp;寺庙&nbsp;&nbsp;&nbsp;&nbsp;主题乐园
                                </li>
                                <li>公园&nbsp;&nbsp;&nbsp;&nbsp;房车露营
                                </li>
                            </ul>
                        </div>
                        <div>
                            <div style="float: left"><img src="imgs/index/pic_024.jpg" height="60px" width="60px"
                                    style="border-radius: 50%;margin: 10px 20px"></div>
                            <div style="float: left;margin: 20px 8px">当季热门<br>
                                解锁好去处
                            </div>
                        </div>
                        <div>
                            <div style="float: left;clear: both;"><img src="imgs/index/rm_040.jpg" height="60px"
                                    width="60px" style="border-radius: 50%;margin: 10px 20px"></div>
                            <div style="float: left;margin: 20px 8px">热门酒店<br>
                                舒适安心<br><br><br>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>

    <!-- body 导航 -->
    <div class="container" style="margin-top: 20px;">
        <div class="row">
            <h3>热门景点</h3>
        </div>
    </div>

    <!-- 热门景点 -->
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-1">
            </div>
            <div class="col-md-9">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="thumbnail">
                                <img src="imgs/index/rm_016.jpg" alt="通用的占位符缩略图">
                                <div class="caption" style="overflow:hidden">
                                    <span style="float: left;">扬州西湖</span>
                                    <span style="float: right;">&nbsp;起</span>
                                    <span style="float: right;color: red"><i>¥</i><em>80</em></span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="thumbnail">
                                <img src="imgs/index/rm_020.jpg" alt="通用的占位符缩略图">
                                <div class="caption" style="overflow:hidden">
                                    <span style="float: left;">扬州西湖</span>
                                    <span style="float: right;">&nbsp;起</span>
                                    <span style="float: right;color: red"><i>¥</i><em>80</em></span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="thumbnail">
                                <img src="imgs/index/rm_019.jpg" alt="通用的占位符缩略图">
                                <div class="caption" style="overflow:hidden">
                                    <span style="float: left;">扬州西湖</span>
                                    <span style="float: right;">&nbsp;起</span>
                                    <span style="float: right;color: red"><i>¥</i><em>80</em></span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="thumbnail">
                                <img src="imgs/index/rm_014.jpg" alt="通用的占位符缩略图">
                                <div class="caption" style="overflow:hidden">
                                    <span style="float: left;">扬州西湖</span>
                                    <span style="float: right;">&nbsp;起</span>
                                    <span style="float: right;color: red"><i>¥</i><em>80</em></span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="thumbnail">
                                <img src="imgs/index/rm_046.jpg" alt="通用的占位符缩略图">
                                <div class="caption" style="overflow:hidden">
                                    <span style="float: left;">东方明珠</span>
                                    <span style="float: right;">&nbsp;起</span>
                                    <span style="float: right;color: red"><i>¥</i><em>80</em></span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="thumbnail">
                                <img src="imgs/index/rm_045.jpg" alt="通用的占位符缩略图">
                                <div class="caption" style="overflow:hidden">
                                    <span style="float: left;">扬州西湖</span>
                                    <span style="float: right;">&nbsp;起</span>
                                    <span style="float: right;color: red"><i>¥</i><em>80</em></span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="thumbnail">
                                <img src="imgs/index/rm_043.jpg" alt="通用的占位符缩略图">
                                <div class="caption" style="overflow:hidden">
                                    <span style="float: left;">韭菜洞</span>
                                    <span style="float: right;">&nbsp;起</span>
                                    <span style="float: right;color: red"><i>¥</i><em>40</em></span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="thumbnail">
                                <img src="imgs/index/rm_042.jpg" alt="通用的占位符缩略图" class="box">
                                <div class="caption" style="overflow:hidden">
                                    <span style="float: left;">朝天宫 </span>
                                    <span style="float: right;">&nbsp;起</span>
                                    <span style="float: right;color: red"><i>¥</i><em>9</em></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-1">
                <img src="imgs/index/b_001.jpg" alt="">
            </div>
        </div>
    </div>
    <!-- body 导航 -->
    <div class="container" style="margin-top: 20px;">
        <div class="row">
            <h3>攻略玩法</h3>
        </div>
    </div>

    <!-- 攻略玩法 -->
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-1">
            </div>
            <div class="col-md-9">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="thumbnail">
                                <img src="imgs/index/gl_001.jpg" alt="通用的占位符缩略图">
                                <div class="caption" style="overflow:hidden">
                                    <h3 align="center">杭州</h3>
                                    <p style="text-align:center">西子湖畔人间天堂</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="thumbnail">
                                <img src="imgs/index/gl_002.jpg" alt="通用的占位符缩略图">
                                <div class="caption" style="overflow:hidden">
                                    <h3 align="center">丽江</h3>
                                    <p style="text-align:center">一米阳光</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="thumbnail">
                                <img src="imgs/index/gl_003.jpg" alt="通用的占位符缩略图">
                                <div class="caption" style="overflow:hidden">
                                    <h3 align="center">苏州</h3>
                                    <p style="text-align:center">古色古香书卷气</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="thumbnail">
                                <img src="imgs/index/gl_004.jpg" alt="通用的占位符缩略图">
                                <div class="caption" style="overflow:hidden">
                                    <h3 align="center">成都</h3>
                                    <p style="text-align:center">吃辣在巴蜀</p>

                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="thumbnail">
                                <img src="imgs/index/gl_004.jpg" alt="通用的占位符缩略图">
                                <div class="caption" style="overflow:hidden">
                                    <h3 align="center">圣里西尼</h3>
                                    <p style="text-align:center">蜜月好去处</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="thumbnail">
                                <img src="imgs/index/gl_006.jpg" alt="通用的占位符缩略图">
                                <div class="caption" style="overflow:hidden">
                                    <h3 align="center">北京</h3>
                                    <p style="text-align:center">流光溢彩在首都</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="thumbnail">
                                <img src="imgs/index/gl_007.jpg" alt="通用的占位符缩略图">
                                <div class="caption" style="overflow:hidden">
                                    <h3 align="center">张家界</h3>
                                    <p style="text-align:center">惊险刺激玻璃栈道</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="thumbnail">
                                <img src="imgs/index/gl_008.jpg" alt="通用的占位符缩略图" class="box">
                                <div class="caption" style="overflow:hidden">
                                    <h3 align="center">冲绳</h3>
                                    <p style="text-align:center">花样玩法等你来</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-1">
                <img src="imgs/index/b_002.jpg" alt="">
            </div>
        </div>
    </div>

    <!-- body  end -->

    <!-- 底部导航 begin -->
    <div class="container-fluid">
        <div class="row">
            <nav class="navbar navbar-inverse fixed-bottom" role="navigation">
                <div class="container-fluid" style="font-size: 13px">
                    <div class="row">
                        <ul class="nav navbar-nav">
                            <li>
                                <div style="color: rgb(177, 177, 177);margin-top: 50px;margin-left: 150px"
                                    class="col-md-4">
                                    <h4>悠&nbsp;U旅行</h4>
                                    <p>悠&nbsp;U是一个新方式的<span style="color: bisque"> "旅行交友"</span> 的网站,<br>
                                        旨在帮助旅行者计划和结伴游玩,<br>
                                        可以提供业余的引路人带给旅行者更好的 <span style="color: bisque"> "游玩体验"</span><br>
                                        提供一定的旅行日记,打造 <span style="color: bisque">"新方式旅行交友"</span><br>
                                    </p>
                                </div>
                            </li>
                            <li>
                                <div style="color: rgb(177, 177, 177);margin-top: 50px;margin-left: 0px"
                                    class="col-md-12">
                                    <h4>关于我们</h4>
                                    <ul class="nav navbar-nav" style="list-style: none;margin-left: 0px">
                                        <li>关于悠 U</li>
                                        <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;联系我们</li><br>
                                        <li>服务协议</li>
                                        <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;游记协议</li><br>
                                        <li>达人协议</li>
                                        <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;隐私政策</li><br>
                                        <li>网络信息侵权通知指引</li><br>
                                        <li>网站地图</li>
                                        <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;商业合作</li><br>
                                        <li style="color: bisque">&nbsp;&nbsp;&nbsp;加入我们</li>

                                    </ul>
                            </li>
                            <li>
                                <div style="color: rgb(177, 177, 177);margin-top: 50px;margin-left: 180px"
                                    class="col-md-12">
                                    <h4>帮助中心</h4>
                                    <ul class="nav navbar-nav" style="list-style: none;margin-left: 0px">
                                        <li>新手上路</li><br>
                                        <li style="color: bisque">意见反馈</li>
                                        <li>&nbsp;&nbsp;&nbsp;&nbsp;常见问题</li><br>
                                        <li style="color: bisque">帮助中心</li>
                                        <li>&nbsp;&nbsp;&nbsp;&nbsp;旅行工具</li><br>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <br><br>
                    <hr>
                    <div style="color: rgb(177, 177, 177);margin-top: 20px;margin-left: 150px;font-size: 12px">
                        <div style="float: left;"><img src="imgs/index/logo.jpg" width="60px" height="40px"
                                style="opacity: 0.7;border-radius: 80px;">
                        </div>
                        <div style="float: left;margin: 10px 5px;font-family: '楷体';font-size:18px">悠 U</div>
                        <div style="float: left;;margin-top: 10px;margin-left: 30px">© 2019 悠U
                            版权所有&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;经营许可&nbsp;&nbsp;&nbsp;营业执照</div>
                        <div style="clear: both;margin-left: 130px;margin-bottom: 20px">悠U不是旅行社,也不是代理商,我们只提供一些免费、客观、公正
                            、计费的攻略指南,以及一些业余的引路人
                            对外部网站概不负责</div>

                    </div>
                </div>
                <div
                    style="float: right;width: 40px;height: 50px;margin-right: 10px;background-color: aliceblue;text-align: center">
                    <a href="#top" style="color: rgb(177, 177, 177)"><br>Top&nbsp;↑</a>
                </div>
            </nav>

        </div>
    </div>

    <!-- 底部导航 end -->

    <!-- bootstrap中的js插件依赖于jquery框架,所以必须先引入jquery的js文件 -->
    <script src="plugins/jquery/jquery.min.js"></script>
    <!--引入bootstrap的js文件-->
    <script src="plugins/bootstrap/js/bootstrap.js"></script>

    <!-- 自定义js -->
    <script src="js/content.js?v=1.0.0"></script>
    <script src="js/index/lunbo.js"></script>

    <script>
        $(document).ready(function () {
            $('.col-md-3').each(function () {
                animationHover(this, 'pulse');
            });
        });
    </script>

</body>

</html>